{template '../service_common/header'}

<link rel="stylesheet" href="{KB_WEB_BACK_JS}/lightbox/css/lightbox.css"/>
<link rel="stylesheet" href="http://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="{KB_WEB_FRONT_CSS}/bootstrap.min.css"/>

    <aside class="layui-side layui-bg-black">
        <section class="layui-side-scroll sidebar">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="sidebar-menu" data-cid="0">
                <li class="treeview active">
                    <a href="javascript:;" onclick="cat_order(this)" data-type="-1" data-cid="0">
                        <i class=""></i> <span>全部</span>
                        <i class="fa fa-angle-right pull-right"></i>
                    </a>
                    {if $category_list}
                    <ul class="treeview-menu">
                        {loop $category_list $index $item}
                        <li>
                            <a href="javascript:;" data-cid="{$item['cat_id']}" onclick="cat_order(this)" data-type="0"><i class="fa fa-circle-o"></i> {$item['cat_name']} {if $item['child_list']}<i class="fa fa-angle-right pull-right"></i>{/if}</a>
                            {if $item['child_list']}
                            <ul class="treeview-menu">
                                {loop $item['child_list'] $index $v}
                                <li class=""><a href="javascript:;" data-cid="{$v['cat_id']}" onclick="cat_order(this);" data-type="1"><i class="fa fa-circle-o"></i> {$v['cat_name']}</a></li>
                                {/loop}
                            </ul>
                            {/if}
                        </li>
                        {/loop}
                    </ul>
                    {/if}
                </li>
            </ul>
        </section>
    </aside>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <form class="layui-form" action="javascript:;" method="post">
                <div class="search layui-clear">
                    <div class="layui-col-xs6" style="position: relative;">
                        <img src="{KB_WEB_FRONT_IMG}/search.png" alt="" style="position: absolute;left:12px; top:9px;">
                        <input style="padding-left:40px; " type="text" name="searchInput" required  lay-filter="searchInput" placeholder="请输入单号或客户名" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-col-xs6">
                        <button class="layui-btn" type="button" style="width: 130px; margin-left: 20px;" id="search" lay-submit lay-filter="searchBtn">检索</button>
                    </div>
                </div>
            </form>
            <form class="layui-form" action="javascript" method="post">
                <div class="dateBox layui-clear">
                    创建时间
                    <div class="layui-inline" style="margin-left: 15px; margin-right: 20px"> <!-- 注意：这一层元素并不是必须的 -->
                        <input type="text" class="layui-input" required id="test1" placeholder="请输入日期或选择日期" name="add_time" lay-filter="date">
                    </div>
                    <button class="layui-btn" type="button" style="width: 130px;" id="clear">清除</button>
                    <button class="layui-btn" type="button" style="width: 130px; margin-left: 20px;" id="sx" lay-submit lay-filter="dateBtn">筛选</button>

                    <button class="layui-btn" type="button" style="width: 130px; margin-left: 20px;" onclick="exportOrder();">导出工单</button>
                </div>
            </form>
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title order_nav">
                    <li class="layui-this" data-status="0">待处理</li>
                    <li data-status="2">已处理</li>
                    <li data-status="1">已解决</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <table id="order_list" lay-filter="table_1"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>


<script type="text/javascript">
    require(['jquery', 'layui', 'lightbox', 'common', 'sidebar-menu'], function () {
        $.sidebarMenu($('.sidebar-menu'));

        initOrder();
        //清除
        $('#clear').on('click',function(){
            $('input[name=add_time]').val('');
            layer.msg('已清除');
            initOrder();
        });
        $('input[name="add_time"]').on('keydown', function (e) {
            if (e.keyCode === 13) {
                if ($(this).val().length === 0) {
                    layer.msg('请输入日期', {time: 1000});
                    return false;
                }
                initOrder();
            }
        });

        $('input[name="searchInput"]').on('keydown', function (e) {
            if (e.keyCode === 13) {
                if ($(this).val().length === 0) {
                    layer.msg('请输入单号/客户名', {time: 1000});
                    return false;
                }
                initOrder();
            }
        });

        //JavaScript代码区域
        layui.use('element', function(){
            var element = layui.element;
            //tab事件监听
            element.on('tab(docDemoTabBrief)', function(data){
                initOrder();
            });
        });
        //日期
        layui.use('laydate', function(){
            var laydate = layui.laydate;
            //执行一个laydate实例
            laydate.render({
                elem: '#test1' //指定元素
            });
        });
        layui.use('form', function () {
            var form = layui.form;
            //工单管理检索按钮
            form.on('submit(searchBtn)', function(data){
                var search = $('input[name="searchInput"]').val();
                if (search == '') {
                    layer.msg('请输入单号/客户名');
                    return false;
                }
                initOrder();
            })
            //工单管理筛选日期按钮
            form.on('submit(dateBtn)', function(data){
                if ($('input[name="add_time"]').val() === '') {
                    layer.msg('请输入创建时间');
                    return false;
                }
                initOrder();
            })
        });

        //发送回复
        $('body').on('click', '.send_reply', function () {
            var order_id = $(this).attr('data-id'),
                content = $(this).parent().parent().siblings().find('.layui-textarea').val();
            if (content.length == 0) {
                layer.msg('请填写回复的内容', {icon: 0,time: 1000});
                return false;
            }
            $.post("{php echo $this->createWebUrl('orders', array('act' => 'reply'))}", {order_id: order_id, content: content, system_type: 'front'}, function (data) {
                layer.closeAll();
                layer.msg(data.msg, {time: 1500});
                if (data.code == 200) {
                    setTimeout(function () {
                        initOrder();
                    }, 1000);
                } else {
                    return false;
                }
            });
        });

    });

    //分类工单
    function cat_order(obj) {
        var cat_id = $(obj).attr('data-cid');
        var cat_type = $(obj).attr('data-type');
        if (cat_type == 0) {
            $(obj).parent('li').siblings('li').removeClass('active');
            $(obj).parent('li').siblings('li').find('ul').slideUp()
            if ($(obj).siblings('ul').length == 0) {
                $(obj).parent('li').addClass('active');
            }
        } else if (cat_type == 1) {
            $(obj).parent().siblings().removeClass('active');
            $(obj).parent().addClass('active');
        }
        $('.sidebar-menu').attr('data-cid', cat_id);
        $('.sidebar-menu').attr('data-type', cat_type);
        initOrder();
    }

    //初始化工单数据
    function initOrder() {
        var cat_id = $('.sidebar-menu').attr('data-cid'),
            cat_type = $('.sidebar-menu').attr('data-type'),
            search = $('input[name="searchInput"]').val(),
            order_status = $('.order_nav').find('.layui-this').attr('data-status'),
            add_time = $('input[name=add_time]').val();

        var data = {
            cat_id: cat_id,
            search: search,
            order_status: order_status,
            cat_type: cat_type,
            add_time: add_time
        };

        layui.use(['table', 'layer'], function () {
            var table = layui.table;
            var layer = layui.layer;

            var tableIns = table.render({
                elem: '#order_list',
                url: "{php echo $this->createWebUrl('service', array('act' => 'orders'))}",
                method: 'post',
                where: data,
                page: true,
                limits: [5, 10, 25, 50],
                limit: 10,
                height: 560,
                cols: [[
                    {field: 'order_sn', title: '单号', width: 200, align:'center'},
                    {field: 'nickname', title: '客户名称', width: 300, align:'center', templet: '#nickname'},
                    {field: 'content', title: '工单详情', width: 300, align:'center'},
                    {field: 'reply_num', title: '回复次数', width: 100, align:'center'},
                    {field: 'add_time', title: '创建时间', width: 175, align:'center', sort: true},
                    {field: 'update_time', title: '最近回复日期', width: 175, align:'center', sort: true},
                    {field: 'customer_status_name', title: '客户状态', width: 145, align:'center'},
                    {field: 'order_status_name', title: '工单状态', width: 145, align:'center'},
                    {title: '操作', width: 140, align:'center', templet: '#view_detail'}
                ]]
            });

            table.on('tool(table_1)', function (obj) {
                var current_data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值
                var tr = obj.tr; //获得当前行 tr 的DOM对象
                if (layEvent === 'detail') {
                    $.post("{php echo $this->createWebUrl('service', array('act' => 'getWorkOrder'))}", {order_id: current_data.order_id}, function (data) {
                        if (data.code === 200) {
                            var html = '';

                            html += '<div class="checkDestails">';
                            html += '<div class="' + (data.info.order_status == 0 ? 'pending' : 'resolved') + '">';

                            html += '<div class="gdInfo">';
                            html += '<span class="gdType">工单分类：' + data.info.cat_name + (data.info.child_cat_name.length == 0 ? '' : '-' + data.info.child_cat_name) + '</span>';
                            html += '<span class="curStatus">客户状态：' + data.info.customer_status_name + '</span>';
                            html += '</div>';
                            if (order_status == 0) {
                                html += '<div class="chartContent" style="'+(data.info.customer_status == 2 ? 'border-bottom: 1px solid #d9d9d9;' : '')+'padding-left: 0";>';
                                html += '<div class="l" style="margin-right: 10px; line-height: 30px; font-weight: bold">最新记录</div>';
                                html += '<div class="ueseInfo"><img src="' + data.info.avatar + '" class="layui-nav-img"><span>' + data.info.nickname + '</span></div>';
                                html += '<div class="status">';
                                html += '<p style="margin-bottom: 10px;">' + data.info.new_content + '</p>';
                                    if (data.info.new_pic != null) {
                                        $.each(data.info.new_pic, function (ni, np) {
                                            html += '<a href="'+np+'" data-lightbox="roadtrip_new"><img src="'+np+'" style="width: 50px;height: 50px;margin-right: 5px"></a>';
                                        });
                                    }
                                    html += '<div class="time" style="margin-top: 5px;color: #999;">' + data.info.new_add_time + '</div>';
                                    html += '</div>';
                                    html += '</div>';
                            }
                            //回复内容框: 客户状态为未回复或者选择未解决
                            if (data.info.order_status == 0 && (data.info.customer_status == 1 || data.info.customer_status == 3)) {
                                html += '<form class="layui-form" action="javascript:;">';
                                html += '<div class="layui-form-item layui-form-text">';
                                html += '<label class="layui-form-label" style="padding-left: 0;width: 38px; text-align: left; padding-right: 10px;">回复</label>';
                                html += '<div class="layui-input-block" style="margin-left: 45px">';
                                html += '<textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>';
                                html += '</div>';
                                html += '</div>';
                                html += '<div class="layui-form-item">';
                                html += '<div class="layui-input-block" style="margin-left: 45px">';
                                html += '<button type="button" class="layui-btn send_reply" style="width: 130px;" data-id="'+ data.info.order_id +'">发送</button>';
                                html += '</div>';
                                html += '</div>';
                                html += '</form>';
                            }

                            if (data.order_list.length != 0) {
                                html += '<div class="l" style="margin-right: 10px; line-height: 30px; font-weight: bold">历史记录</div>';
                                $.each(data.order_list, function (index, item) {
                                    if (item['is_reply'] == 0) {
                                        html += '<div class="chartContent" style="padding-left:0;margin-top: 0;padding-top: 0">' +
                                            '<div class="ueseInfo"><img src="' + item.avatar + '" class="layui-nav-img"><span>' + item.nickname + '</span></div>' +
                                            '<div class="status">' +
                                            '<p style="margin-bottom: 10px;">' + item.content + '</p>';
                                            if (item['pic'] != null) {
                                                $.each(item['pic'], function (i, p) {
                                                    html += '<a href="'+p+'" data-lightbox="roadtrip'+item.order_id+'"><img src="'+p+'" style="width: 50px;height: 50px;margin-right: 5px"></a>';
                                                });
                                            }
                                            html += '<div class="time" style="margin-top: 5px;color: #999;">' + item.add_time + '</div>' +
                                            '</div>' +
                                            '</div>';
                                    } else {
                                        html += '<div class="chartContent" style="padding-left:0; display: flex; padding-top: 0">' +
                                            '<div class="l" style="margin-right: 10px; line-height: 30px;">回复</div>' +
                                            '<div class="r">' +
                                            '<div class="ueseInfo"><img src="' + item.avatar + '" class="layui-nav-img"><span>' + item.nickname + '</span></div>' +
                                            '<div class="status">' +
                                            '<p style="margin-bottom: 10px;">' + item.content + '</p>' +
                                            '<div class="time" style="margin-top: 5px;color: #999;">' + item.add_time + '</div>' +
                                            '</div>' +
                                            '</div>' +
                                            '</div>';
                                    }
                                });
                            }

                            html += '</div></div>';

                            layer.open({
                                type: 1,
                                area: ['700px', '500px'], //宽高
                                closeBtn: 1,
                                shadeClose: true,
                                move: false,
                                content: html
                            });
                        } else {
                            layer.msg(data.msg, {time: 1000});
                            return false;
                        }
                    });
                }
            });
        });
    }

    function exportOrder() {
        var is_down_pic;

        var add_time_status = $('.layui-table th').eq(4).find('.layui-table-sort').attr('lay-sort'),
            update_time_status = $('.layui-table th').eq(5).find('.layui-table-sort').attr('lay-sort');
        var sort_Order = '',sort_Name = '';
        if (add_time_status != undefined) {
            sort_Order = add_time_status;
            sort_Name = 'add_time';
        }
        if (update_time_status != undefined) {
            sort_Order = update_time_status;
            sort_Name = 'update_time';
        }

        var order_status = $('.order_nav').find('.layui-this').attr('data-status'),
            cat_id = $('.sidebar-menu').attr('data-cid'),
            search_name = $('input[name="searchInput"]').val(),
            begin_time = $('input[name=add_time]').val(),
            end_time = '',
            sortOrder = sort_Order,
            sortName = sort_Name;

        layer.confirm('是否下载用户上传的图片？', {
            btn: ['是', '否，直接导出工单'],
            shadeClose: true
        }, function(index){
            //按钮【按钮一】的回调
            is_down_pic = 1;
            layer.close(index);
            window.location.href = "{php echo $this->createWebUrl('orders', array('act' => 'exportOrder'))}&sortOrder="+sortOrder+'&sortName='+sortName+'&order_status='+order_status+'&cat_id='+cat_id+'&search_name='+search_name+'&begin_time='+begin_time+'&end_time='+end_time+'&is_down_pic='+is_down_pic;
        }, function(index){
            //按钮【按钮二】的回调
            is_down_pic = 2;
            window.location.href = "{php echo $this->createWebUrl('orders', array('act' => 'exportOrder'))}&sortOrder="+sortOrder+'&sortName='+sortName+'&order_status='+order_status+'&cat_id='+cat_id+'&search_name='+search_name+'&begin_time='+begin_time+'&end_time='+end_time+'&is_down_pic='+is_down_pic;
        });
    }
</script>

<script type="text/html" id="nickname">
    <div><img src="{{d.avatar}}" style="border-radius:25px;width: 25px;height: 25px;">&nbsp;&nbsp;{{d.nickname}}</div>
</script>

<script type="text/html" id="view_detail">
    <a class="layui-btn layui-btn-primary layui-btn-mini layui-btn-radius" lay-event="detail">查看详情</a>
</script>

{template '../service_common/footer'}